<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
	<title>Title</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/base.css">
	<style>

	</style>
</head>
<body>

<div class="page fx-col">
	<div class="noshrink fx">
		<div class="fx-g1 fx align-center">
			<label><input type="text" id="keywords" placeholder="请输入关键词" class="layui-input"></label>
			<button id="search_btn" class="layui-btn ml-10">搜索</button>
		</div>
		<button class="layui-btn layui-btn-normal edit-btn"  data-id="0">新增</button>
	</div>

	<div class="fx-g1">
		<table class="layui-table">
			<thead>
			<tr>
				<th>序号</th>
				<th>考试名称</th>
				<th>考试时间</th>
				<th>考试科目</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="data_list">
			
			</tbody>
		</table>
	</div>
	<div id="page" class="noshrink"></div>
</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script src="assets/js/base.js"></script>

<script>
	function search() {
		let keywords = $("#keywords").val();
		$.ajax({
			url: "exam/list",
			type: "post",
			data: {keywords, pageNumber, pageSize},
			dataType: "json",
			success(res) {
				let data = res.data;
				page(data.total);
				let content = "";
				//jsp -> 先由后端java处理，处理完后生成完整页面代码，-> 发送到用户浏览器 -> 解析页面代码，该由js处理的就作为js处理，该由css处理的就作为css处理
				data.list.forEach((item, i) => {
					item.startDate = dateFormat(item.startDate, "yyyy-MM-dd");
					item.endDate = dateFormat(item.endDate, "yyyy-MM-dd");
					let subjectGroup = item.subjectGroup;
					let subjects = "";
					Object.keys(subjectGroup).forEach(item => {
						subjects += item + ":<br/>" + subjectGroup[item] + "<br/>";
					})
					item.subjectGroup = subjects;


					content +=
						`
						<tr>
							<td>${"${i+1}"}</td>
							<td>${"${item.name}"}</td>
							<td>${"${item.startDate}"} ~ ${"${item.endDate}"}</td>
							<td>
								${"${item.subjectGroup}"}
							</td>
							<td>
								<button type="button" data-id="${"${item.id}"}" class="edit-btn opt-btn layui-btn layui-btn-sm  layui-btn-normal">
								<i class="layui-icon layui-icon-edit"></i>
								</button>
								<button type="button" data-id="${"${item.id}"}" class="del-btn opt-btn layui-btn layui-btn-sm  layui-btn-danger">
									<i class="layui-icon layui-icon-delete"></i>
								</button>
								<button type="button" data-id="${"${item.id}"}" class="input-btn opt-btn layui-btn layui-btn-sm  ">
									<i class="layui-icon layui-icon-form"></i>
								</button>
							</td>
						</tr>
						`
				})

				$("#data_list").html(content);

				layer.closeAll();

			}
		})
	}


	$(function () {

		$(document).on("click", ".del-btn", function () {
			let id = $(this).data("id");
			layer.confirm('是否确认删除该数据', {icon: 3, title:'提示'}, function(index){
				$.ajax({
					url: "exam/del",
					data: {id},
					dataType: "json",
					success(res) {
						if (res.success) {
							layer.msg('删除成功', {icon: 6}, function () {
								search();
							});
						} else {
							layer.msg(res.msg, {icon: 2});
						}
					}
				})

				layer.close(index);
			}, function(index) {
				console.log("点了取消");
				layer.close(index);
			});
		}).on("click", ".edit-btn", function () {
			let id = $(this).data("id");
			layer.open({
				type: 2,
				title:"编辑考试",
				area: ['80%', '80%'],
				content: 'exam/edit?id='+id //这里content是一个普通的String
			});
		}).on("click", ".input-btn", function () {
			let id = $(this).data("id");
			window.location = "/pages/exam/input.html?id="+id
		}).on("click", "#search_btn", function () {
			search();
		}).on("change", "#keywords", function () {
			pageNumber = 1;
		})


		search();


	})
</script>
</html>
